<!--processed-->
<link rel="stylesheet" href="/views/worldpay/view/tmp.css">
<section id="worldpay-view">
    <div class="breadcrumb fx-row-s">
        <i class="back iconfont icon-fanhui1" id="back"></i>
        <span>worldpay</span>
        <span class="interval">/</span>
        <span>view info</span>
    </div>
    <div class="feat-grid">
        <div class="row">
            <div class="left col-sm-14">
                <div class="left-head">
                    <!--模板填充-->
                    <span class="head-time"></span>
                    <span><label>Order Code：</label><span  class="head-code"></span></span>
                    <span><label>Transcation amount：</label> <span class="head-amount"></span></span>
                    <!--<span><label>Reason：</label> <span class="head-reason"></span> </span>-->
                </div>
                <div class="left-prompt">
                    <span class="prompt-text">
                           Please supply supporting information for order: <span class="head-code"></span>
                    </span>
                    <div class="icon-box">
                        <i class="iconfont icon-shuoming"></i>
                        <div class="layer-track">
                            <div class="track-title">
                                <span style="font-size: 16px">Note</span>
                                <span class="track-close">&times;</span>
                            </div>
                            <ul class="track-content">
                                <li>You can upload a file with one of the following extensions: doc, docx, jpg, jpeg, png, gif, tiff, pdf or txt</li>
                                <li>Alternatively you can upload a zip file which can contain multiple files of the given extensions.</li>
                                <li>The maximum file size upload is 4MB.</li>
                                <li>Please submit all support documentation in a single submission, as additional submissions may not be reviewed.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--证据上传说明-->

                <section class="left-up-box">
                    <h4 class="mt20">Attachment File:</h4>
                    <div class="prev-file">
                        <!--文件列表-->
                    </div>
                </section>

                <!--<div class="left-title mt20">
                    <h4 data-name="reason">Attachment File:</h4>
                </div>-->
                <div class="left-content mt30">

                </div>

                <div class="left-message">
                    <div class="fx-row-s">
                        <h4>Additional Supporting Comments:</h4>
                    </div>
                    <div class="message-box">
                        <!--content 列表-->
                    </div>
                    <!--<textarea name="" id="sendInfoMsg" placeholder="Send a friendly message to the buyer"></textarea>-->
                </div>

            </div>
            <div class="right col-sm-10">
                <!--模板填充-->
                <div class="right-info">
                    <div class="line">
                        <h3>Network station</h3>
                        <p data-name="station"></p>
                    </div>
                    <div class="line">
                        <h3>Customer Contact</h3>
                        <p data-name="buyer"></p>
                    </div>
                    <div class="line">
                        <h3>Shipping Address</h3>
                        <p data-name="shippingAddress"></p>
                    </div>
                    <div class="line">
                        <h3>Transaction ID:</h3>
                        <p data-name="transactionId"></p>
                    </div>
                    <div class="line">
                        <h3>Order No:</h3>
                        <p data-name="orderSn"></p>
                    </div>
                </div>
                <!--erp信息-->
                <div class="right-erp">
                    <div class="row">
                        <div class="col-sm-12"><h4>Logistics Information:</h4></div>
                        <div class="col-sm-12"><button id="stopOrder" class="btn-b hide">终止订单</button></div>
                    </div>
                    <div class="erp-box">

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!--渲染模板开始-->

<!--erp订单列表模板-->
<script type="text/html" id="resolution-detail-erp">
    <div class="erp-order row mt10">
        <div class="col-sm-12"><label>订单号：</label><span>{{OrderNo}}</span></div>
        <div class="col-sm-12"><label>状态：</label><span>{{ERPStatus}}</span></div>
    </div>
    <ul class="erp-content">
        {{each OrderGoods as v i}}
        {{set isTrue = v.PackageStatus == '已发货' ? true : false}}
        <li class="content-list">
            <div class="text-line">
                {{if(isTrue)}}
                <i class="iconfont icon-yifahuo"></i>
                {{/if}}
                <strong><i class="line-status" style="color:{{isTrue ? '' : '#999'}}">{{v.PackageStatus}}</i></strong>
            </div>
            <div class="text-line row">
                <div class="col-sm-12"><label>sku：</label><span>{{v.SkuId}}</span></div>
                <div class="col-sm-12"><label>Description：</label><span>{{v.Specification}}</span></div>
            </div>
            <div class="text-line row">
                <div class="col-sm-12"><label>Tracking number：</label><span>{{v.ExpressNo}}</span></div>
                <div class="col-sm-12"><label>Package number：</label><span>{{v.PackageNo}}</span></div>
            </div>
        </li>
        {{/each}}
    </ul>
</script>

<!--worldpay文件列表-->
<script type="text/html" id="worldpay-file-list">
    {{each history as v i}}
    {{set url = '/api/wp/downloadEvidenceFile/' + $imports.base64_encode(v.absolute_path +'/'+ v.evidence_file_name)}}
    {{set href = '/api/wp/downloadEvidenceFile/' + v.id}}
    <div class="fx-row-s mt5">
        <span class="mr30">
            <a data-name="/api/wp/downloadEvidenceFile" href="{{v.oss_url}}" target="_blank">点击下载</a>
        </span>
        <i style="font-size: 21px;" class="iconfont icon-file mr5"></i>
        <span class="mr30">
            <span>{{v.evidence_file_name}}</span>
        </span>
        <span class="mr30">
            <label><strong>Owner:</strong></label>
            <span>{{v.email_name}}</span>
        </span>
        <span>
            <label><strong>Process time:</strong></label>
            <span>{{v.updated_at}}</span>
        </span>
    </div>
    {{/each}}
</script>

<script type="text/html" id="worldpay-content-list">
    {{each history as v i}}
    <div class="box-list">
        <div class="list-content">{{v.msg}}</div>
        <div class="list-footer">
            <span class="mr30">
                <label>owner:</label>
                <span>{{v.email_name}}</span>
            </span>
            <span>
                <label>Process time:</label>
                <span>{{v.updated_at}}</span>
            </span>
        </div>
    </div>
    {{/each}}
</script>

<!-- js -->
<script>

    $.extend(window.p,{
        src : [],
        //保存当前case信息
        sendInfo:{},
        //订单数据
        orderArr:[],
        //sku列表
        skuID:[],

    });

    template.defaults.imports.encodeURIComponent = encodeURIComponent;
    template.defaults.imports.base64_encode = com.base64_encode;
    template.defaults.imports.app = app;

    $(function(){

        init();

        function init(){

            //初始请求
            p.urlPara && requestDetail(p.urlPara);
            //返回
            $(".back").click(function(){
                window.history.go(-1);
            });


            //说明事件
            $('.icon-shuoming').on('click',function(){
                $(".layer-track").fadeIn();
            })
            $(".icon-box").on('click','.track-close',function(){
                $(".layer-track").fadeOut();
            })

        }

        //请求详情
        function requestDetail(para){
            var loadObj = null;
            app.ajax({
                type:'GET',
                url:app.api('/api/getCaseInfo/') + para,
                beforeSend:function(){
                    loadObj = $.load({
                        insert:$("#worldpay-view"),
                    });
                },
                success:function(res){
                    console.log(res)
                    if(res.code == 0){
                        renderDetail(res);
                        //订单相关
                        renderRightInfo(res.data.orderInfo);
                    }
                },
                complete:function(){
                    loadObj.close()
                }
            })
        }

        //渲染详情
        function renderDetail(res){

            var fileDom = template('worldpay-file-list',res.data);
            $(".prev-file").html(fileDom);

            var contentDom = template('worldpay-content-list',res.data);
            $(".message-box").html(contentDom);

            var data = res.data;
            $(".head-time").html(data.booking_date);
            $(".head-code").html(data.orderCode);
            $(".head-amount").html(data.amount);
        }

        function renderRightInfo(erp){
            //订单物流
            var dom = template('resolution-detail-erp',erp);
            $(".erp-box").html(dom);

            if(!erp){
                $(".erp-box").html("<p class='mt10'>Temporarily no data please manually query！</p>");
                return;
            }
            var str2 = erp && (erp.Consignee + "<br/>");
            var str3 = erp && (erp.Email + "<br/>");
            $("[data-name='buyer']").html(str2 + str3);
            $("[data-name='shippingAddress']").html(erp && erp.Address);
            $("[data-name='transactionId']").html(erp && erp.Tx);
            $("[data-name='orderSn']").html(erp && erp.OrderNo);
            $("[data-name='station']").html(erp && erp.SiteName);
            //p.sendInfo.order_sn = (erp && erp.OrderNo);
        }


        //erp请求
        function requestErp(){
            var order = encodeURIComponent(p.sendInfo.order_sn);
            var id = p.sendInfo.erp_site_id;
            let _url = "https://api-erp.orderplus.com/api/logistics/GetOrderPackage?orderNo="+order+"&siteId=" + id + "&transaction_id=" + p.sendInfo.details.transaction_id
            $.post(_url, {},function (res) {
                if(res.code == 200){
                    var dom = template('resolution-detail-erp',res.response);
                    $(".erp-box").html(dom);
                    //右侧信息填充
                    renderRightInfo(res.response);
                    p.orderArr = res.response.OrderGoods;
                }else{
                    $.comMessage({
                        type:'warning',
                        text:res.error
                    });
                }
            })
        }



    });

</script>